关于在vue项目使用wangEditor4.0富文本插件字体配置后失效问题 |
您所在的位置：网站首页 › vba 设置字体颜色失效 › 关于在vue项目使用wangEditor4.0富文本插件字体配置后失效问题 |
|
不知道大家有没有遇到过，在使用wangEditor富文本插件的时候，明明已经配置字体，却没法生效的情况，例如： this.editor = new wangEditor(this.$refs.editor) this.editor.config.menus = [ 'fontName', // 字体 ] // 创建富文本编辑器 this.editor.create()以上的设置后，在我的项目里其实是没有生效的。之前百度过很多方法都没办法解决，最后想出了个方法，就是利用css选择器的方法把问题解决； .wangeditor{ .w-e-text { // 解决字体不生效问题 [face="黑体"] {font-family: "黑体", serif;} [face="仿宋"] {font-family: "仿宋", serif;} [face="楷体"] {font-family: "楷体", serif;} [face="标楷体"] {font-family: "标楷体", serif;} [face="华文仿宋"] {font-family: "华文仿宋", serif;} [face="华文楷体"] {font-family: "华文楷体", serif;} [face="宋体"] {font-family: "宋体", serif;} [face="微软雅黑"] {font-family: "微软雅黑", serif;} [face="Arial"] {font-family: "Arial", serif;} [face="Tahoma"] {font-family: "Tahoma", serif;} [face="Verdana"] {font-family: "Verdana", serif;} [face="Times New Roman"] {font-family: "Times New Roman", serif;} [face="Courier New"] {font-family: "Courier New", serif;} } }因为在wangEditor富文本里选择字体后，都会插入一个face的属性，并带上你所选的字体名称（细心的伙伴在F12选中对应的元素也会发现这点），所以利用这个css选择器的方法就可以把没生效的字体给呈现出来 当然，也有其他的一些伙伴会出现字体加粗、斜体等等没生效的问题，这种一般都是权重有关，单独在css里设置就好； .wangeditor { .w-e-text { p{ b{ font-weight: bold !important; } i{ font-style:italic !important; } } ul{ li{ list-style-type: disc; b{ font-weight: bold !important; } i{ font-style:italic !important; } } } ol{ li{ list-style-type: decimal; b{ font-weight: bold !important; } i{ font-style:italic !important; } } } tbody{ b{ font-weight: bold !important; } i{ font-style:italic !important; } } } } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |